<template>
    <div class="wrapper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="item of swiperList" :key="item.id">
            <img class="swiper-img" :src="item.imgUrl"/>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
</template>
<script>
export default{
    name:'HomeSwiper',
    data(){
        return {
           swiperOption:{
                pagination : '.swiper-pagination',
                loop:true,
                autoplay: true,
                speed: 2500
           },
           swiperList:[
                {id:1,imgUrl:'http://img1.qunarzz.com/vc/1d/d5/dc/bfb1990e14a1fdb082cf817657.jpg'},
                {id:2,imgUrl:'http://img1.qunarzz.com/vc/a9/f4/f1/bb33ddb697f07c375e7af81256.jpg'},
                {id:3,imgUrl:'http://img1.qunarzz.com/vc/bf/9d/a3/67b7b37511fa26a78298bf1da1.jpg'}
           ]
        }
    }
}
</script>
<style lang="stylus" scoped>
    .wrapper >>> .swiper-pagination-bullet-active
        background:#ccc
    .wrapper
        overflow: hidden
        width: 100%
        height: 0
        padding-bottom: 32.5%
        .swiper-img
            width:100%
</style>

